﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="TravelTourism.DetailsPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TravelTourism"
    xmlns:common="using:TravelTourism.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="appBar2" Padding="10,0,10,0" BorderBrush="{x:Null}" MinHeight="88" Background="#FF7F4829">
            <Grid Margin="0" >
                <StackPanel Margin="110,10,0,10" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <Button x:Name="AppTop1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource TopApp}" Tapped="AppTop1_Tapped_1">
                        <Image Height="79" Width="64" Source="Assets/AppTop1.png" Stretch="Fill"/>
                    </Button>
                    <Button x:Name="AppTop2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource TopApp}">
                        <Image Height="79" Width="64" Source="Assets/AppTop2.png" Stretch="Fill"/>
                    </Button>
                    <Button x:Name="AppTop3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource TopApp}">
                        <Image Height="79" Width="64" Source="Assets/AppTop3.png" Stretch="Fill"/>
                    </Button>
                    <Button x:Name="AppTop4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource TopApp}">
                        <Image Height="79" Width="64" Source="Assets/AppTop4.png" Stretch="Fill"/>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
    	<Grid.Background>
    		<ImageBrush ImageSource="Assets/bg.jpg" Stretch="UniformToFill"/>
    	</Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Your page title goes here" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,190,40"/>
            <Grid x:Name="grid" HorizontalAlignment="Right" Height="100" VerticalAlignment="Center" Width="234" Margin="0,0,40,0" Grid.ColumnSpan="2">
            	<Image Source="Assets/MainLogo.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
        </Grid>
        <ScrollViewer x:Name="scrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
        	<Grid x:Name="MainGrid" Margin="120,0,0,0">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="588"/>
        			<ColumnDefinition Width="20"/>
        			<ColumnDefinition Width="508"/>
        			<ColumnDefinition Width="20"/>
					<ColumnDefinition Width="480"/>
        			<ColumnDefinition Width="20"/>
        		</Grid.ColumnDefinitions>
        		<Image HorizontalAlignment="Left" Height="459" VerticalAlignment="Top" Width="512" Source="Assets/PackagesPage/DetaopPic.png"/>
        		<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,142,0,0"/>
        		<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
        			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10">
        				<Image Source="Assets/PackagesPage/DetalPic1.jpg" Stretch="None" Width="61" Height="61"/>
        			</StackPanel>
        			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10">
        				<Image Source="Assets/PackagesPage/DetalPic2.jpg" Stretch="None" Width="61" Height="61"/>
        			</StackPanel>
        			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10">
        				<Image Source="Assets/PackagesPage/DetalPic4.jpg" Stretch="None" Width="61" Height="61"/>
        			</StackPanel>
        			<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10">
        				<Image Source="Assets/PackagesPage/DetalPic3.jpg" Stretch="None" Width="61" Height="61"/>
        			</StackPanel>
        		</StackPanel>
        		<StackPanel Grid.Column="2" Margin="0,0,15,0">
        			<StackPanel Orientation="Vertical" Margin="15,0,15,20">
        				<TextBlock TextWrapping="Wrap" Text="About the Campsite" FontFamily="Segoe UI" FontSize="26" FontWeight="Light"/>
        			</StackPanel>
        			<StackPanel Orientation="Vertical" Margin="15,0,15,20"/>
        			<StackPanel Orientation="Vertical" Margin="15,0,15,20">
        				<TextBlock TextWrapping="Wrap" Text="Agra, the land of the Mughals, holds a special place in the hearts of seasoned travelers and first-time visitors alike. Nestled on the fertile banks of River Yamuna, this city drew the attention of the mighty Mughals, who made it their capital and left a legacy of stunning architecture that millions throng to see till today. The many monuments and ruins and the bustling everyday life of Agra, gives visitors a vivid glimpse in to the grandeur and history of the Mughal dynasty. Though best known for the Taj Mahal, Agra is home to many other stunning structures like the majestic Agra Fort, Fatehpur Sikri and Sikandra, many of which are recognized as UNESCO World Heritage Sites. " FontFamily="Segoe UI" FontSize="16" FontWeight="Light"/>
        			</StackPanel>
        		</StackPanel>
        		<StackPanel Grid.Column="4" Margin="0,0,15,0" VerticalAlignment="Top">
        			<StackPanel Orientation="Vertical" Margin="15,53,15,0" VerticalAlignment="Top">
        				<TextBlock TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="16" FontWeight="Light">
        					<Run Text="Site. Stop for lunch at Kosi Resorts. Return to Delhi around 7 pm."/>
        					<LineBreak/>
        					<Run/>
        					<LineBreak/>
        					<Run Text="Day 1: Saturday: Assemble at Hotel Country Inn at 7 am | Depart from Delhi"/>
        					<LineBreak/>
        					<Run/>
        					<LineBreak/>
        					<Run Text="After you assemble at Hotel Country Inn, Saket by 7:30 am, you will be served breakfast at 7:45 am. Depart from Delhi towards Agra at 8:30 am. Check-in at Hotel Windham. Pay for your own lunch in the afternoon. In the evening, visit the Taj Mahal. Stay overnight at the hotel. Day 2: Sunday: Trip to Fatehpur Sikri | Return to Delhi"/>
        					<LineBreak/>
        					<Run/>
        					<LineBreak/>
        					<Run Text="After breakfast at the hotel, visit Fatehpur Sikri, which is also a UNESCO World Heritage"/>
        				</TextBlock>
        			</StackPanel>
        		</StackPanel>
        	</Grid>
        </ScrollViewer>
        <Grid x:Name="grid1" HorizontalAlignment="Left" Height="100" Opacity="0" VerticalAlignment="Top" Width="100">
        	<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Opacity="0" TextWrapping="Wrap" Text="Please switch to full screen to view the details." VerticalAlignment="Top"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape">
                	<Storyboard>
                		<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="pageTitle">
                			<DiscreteObjectKeyFrame KeyTime="0">
                				<DiscreteObjectKeyFrame.Value>
                					<Thickness>0,0,177,40</Thickness>
                				</DiscreteObjectKeyFrame.Value>
                			</DiscreteObjectKeyFrame>
                		</ObjectAnimationUsingKeyFrames>
                	</Storyboard>
                </VisualState>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="pageTitle">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,0,190,40</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="50,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                     
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid1" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Int32>0</x:Int32>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Int32>2</x:Int32>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Stretch</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Stretch</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="grid1">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Center</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Center</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<FontFamily>Segoe UI</FontFamily>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="24"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>10,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="appBar2">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="pageTitle">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>0,0,0,40</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
